import * as c from '@/services/consts';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
} from '@ant-design/pro-form';
import { Button, Col, Row, Space, Tag } from 'antd';
import React, { useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  group: API.VpnGroupMonitorModel | undefined;
  server: API.VpnServerMonitorModel | API.VpnRouteModel| undefined;
  urlGrafana: string | undefined;
  groups: API.VpnGroupMonitorModel[] | undefined;
  grafanaTitle: string | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel, urlGrafana, group, server, groups, grafanaTitle } =
    props;

  if (!visible) {
    return null;
  }
  const [urlGrafanaFormHour, setUrlGrafanaFormHour] =
    useState<string>('now-24h');
  const [grafanaStep, setGrafanaStep] = useState<string>('6m');
  const [useGrafanaServer, setUseGrafanaServer] = useState<boolean>(false);

  let urlGrafanaServer = "https://50.7.214.138:8443/d/K7PbmK5Vk/embed_group_node_dashboard?orgId=1&theme=light&kiosk&refresh=1m&var-device=All&to=now";

  const getAllInstIds = () => {
    if (group) {
      let ids = '';
      for (let item of group?.data) {
        if (ids != '') ids = ids + '|';
        ids = `${ids}${item.ip}:9100`;
      }
      return ids;
    } else if (groups) {
      let ids = '';
      for (let gp of groups) {
        for (let item of gp?.data) {
          if (ids != '') ids = ids + '|';
          ids = `${ids}${item.ip}:9100`;
        }
      }
      return ids;
    }
    return '';
  };

  
  const getInstIds = (ip?: string) => {
    if (ip) {
      let ids = ip.split(':');
      if(ids.length > 0){
        return `${ids[0]}:9100`;
      }
      return ip;
    } 
    return '';
  };


  const formRef = useRef<ProFormInstance>();

  return (
    <DrawerForm<API.VpnServerMonitorModel>
      open={visible}
      title={
        <span>
          流量监控{' '}
          <Tag color="blue">
            {grafanaTitle
              ? grafanaTitle
              : group
              ? group.name
              : server
              ? server.name
              : '全部'}
          </Tag>
        </span>
      }
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={6}>
          <ProFormSelect
            name="grafanaHour"
            label="流量监控时间"
            width={200}
            allowClear={true}
            initialValue={'now-24h'}
            options={c.GrafanaHours}
            fieldProps={{
              onChange: (val, option) => {
                setUrlGrafanaFormHour(val);
                setGrafanaStep(option.interval);
              },
            }}
          />
          </Col>
          <Col span={18}>
            <Space style={{marginTop:30}}>
            <Button
              // type="primary"
              key="change_url"
              onClick={() => {
                setUseGrafanaServer(!useGrafanaServer);
              }}
            >
              切换源
            </Button>
            当前源:{useGrafanaServer == true ? 
            <><Tag color='blue'>Grafana</Tag> [访问出错请先授权:<a target='_blank' href={`${urlGrafanaServer}&from=${urlGrafanaFormHour}&var-interval=${grafanaStep}&var-inst_ids=1.1.1.1:9100`}>授权</a>]</>
            : <Tag color='blue'>cloudflare</Tag>}
          </Space>
        </Col>

        <Col span={24}>
          <iframe
            src={`${useGrafanaServer == true ? urlGrafanaServer : urlGrafana}&from=${urlGrafanaFormHour}&var-interval=${grafanaStep}${
              group || groups
                ? `&var-inst_ids=${getAllInstIds()}`
                : server
                ? `&var-inst_id=${getInstIds(server?.ip)}`
                : ''
            }`}
            width="1150"
            height="1000"
            style={{ borderWidth: 0 }}
          ></iframe>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
